import { useDeferredValue, useEffect, useState, useMemo, memo } from 'react'
const List = memo(function List ({ count }) {
  const [data, setData] = useState([])

  useEffect(() => {
    const data = []
    data.length = 5000
    for (let i = 0; i < data.length; i++) {
      data.fill(i + 1, i)
    }
    setData(data)
  }, [count])

  return (
    <div>
      {data.map(item => {
        return <p key={item}>{count}</p>
      })}
    </div>
  )
})

export default function TestHook () {
  const [inpVal, setInpVal] = useState('')
  const deferredValue = useDeferredValue(inpVal) // 类似于防抖
  const memoList = useMemo(
    () => <List count={deferredValue}></List>,
    [deferredValue]
  )
  return (
    <>
      <h1>UseDeferredValue</h1>
      <input
        type='text'
        value={inpVal}
        onChange={e => setInpVal(e.target.value)}
      />
      {memoList}
    </>
  )
}
